// data url 数据地址，url中就包含了文件数据
// 格式 data:content/type,base64,
//

// content/type 表示文件类型，MIME
// 比如 text/plain 表示文本文件 image/png 表示png图片  application/json 表示json文件

// base64 表示数据的编码格式，不写就是原始模式

// base64就是文本模式，可以将二进制文件转成base64的文本格式

// 1、创建一个script标签元素
const script = document.createElement("script");
const code = "alert(123)";
script.src = `data:application/javascript,${code}`;
document.body.appendChild(script);

// 2、
// btoa  JavaScript 内置的一个全局方法，用于将二进制字符串（通常是字符串）编码为 Base64 格式的 ASCII 字符串
script.src = `data:application/base64,${btoa(code)}`;

// 3、img标签用base64渲染
const img = document.createElement("img");
img.src =
  "";
img.width = 200;
img.height = 200;
document.body.appendChild(img);

// 4、input标签获取图片的base64
const input = document.createElement("input");
document.body.appendChild(input);
input.type = "file";
input.accept = "image/*";
input.onchange = (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  console.log('file,,,', file)
  if (file) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      console.log(reader.result);
      /**
       * ata:image/jpeg;base64,/9j/4QJkRXhpZgAATU0AKgAAAAgACQEPAAIAAAAFAAAAegEQAAIAAAALAAAAgAESAAMAAAABAAEAAAEaAAUAAAABAAAAjAEbAAUAAAABAAAAlAEoAAMAAAABAAIAAAEyAAIAAAAUAAAAnAITAAMAAAABAAEAAIdpAAQAAAABAAAAsAAAAABPUFBPAABPUFBPIEs5IDVHAAAAAABIAAAAAQAAAEgAAAABMjAyNTowMzoxNCAwOTo0MTo0MAAAG4KaAAUAAAABAAAB+oKdAA
       */
    };
  }
};
